<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import skuItem from './components/skuItem';
import { getShopBillList } from '@/app/api/rent';
import { redirect } from '@/utils/common';
const payRef = ref(null);
const detail = ref();
const deviceList = ref();
onShow(() => {
	getDetail();
});
const getDetail = async () => {
	let res: any = await getShopBillList();
	if (res.data) {
		detail.value = res.data;
		deviceList;
	}
};
const payRent = () => {
	// payRef.value?.open(detail.value.order_type, detail.value.order_id, `/addon/shop/pages/order/detail?order_id=${detail.value.order_id}`);
};
</script>
<template>
	<view class="h-[100vh] bg-[#F6F6F6] px-[24rpx] pt-[40rpx] pb-[160rpx] box-border">
		<view class="h-[230rpx] px-[40rpx] pt-[48rpx] text-[4A4A4A] bg-[#fff] rounded-[20rpx]" v-if="detail">
			<view class="text-[32rpx] mb-[60rpx]">{{ detail.rent_month }}月租金（元）</view>
			<view class="text-[72rpx] flex justify-center items-center">
				<text class="text-[32rpx] text-[#000] mr-[16rpx]">¥</text>
				{{ detail.rent_total }}
			</view>
		</view>
		<sku-item v-for="(item, index) in deviceList" :key="`sku${index}`" :item="item" type="bill" />
		<view
			class="w-[calc(100%-48rpx)] fixed z-2 left-0 bottom-[40rpx] w-full h-[80rpx] flex items-center justify-center bg-gradient-to-r from-[#D0AA72] to-[#9A7A4B] ml-[24rpx] rounded-[100rpx] text-[#fff] text-[28rpx]"
			@click="redirect({ url: 'addon/shop/pages/order/list', param: { status: 1 } })"
		>
			确认支付
		</view>
		<!-- <pay ref="payRef" @close="payClose"></pay> -->
	</view>
</template>

<style lang="scss" scoped></style>
<style lang="scss"></style>
